<script setup>
import { computed, ref, watch } from 'vue'
import { readableTime } from '@/common/utils'

// deep 在vue3中不生效
defineOptions({
  options: { styleIsolation: 'shared' },
})

const props = defineProps({
  // 显示
  show: {
    type: Boolean,
    default: false,
  },
  // 当前歌曲信息
  playerInfo: {
    type: Object,
    default: () => ({}),
  },
  // 播放器状态
  playerStatus: {
    type: Object,
    default: () => ({}),
  },
  // 播放队列数据
  playerQueue: {
    type: Array,
    default: () => [],
  },
  // 主题颜色
  theme: {
    type: String,
    default: '#465cff',
  },
  // 是否显示加载
  loading: {
    type: Boolean,
    default: false,
  },
})

// 自定义事件
const emit = defineEmits([
  'show:queue',
  'show:bigPlayer',
  'play',
  'pause',
  'cutSong',
])

// 显示、隐藏播放器弹窗
const showPlayer = ref(props.show)

// 当前歌曲信息索引
const curIdx = ref(0)
const curSongIdx = computed(() => {
  // 获取显示索引歌曲
  const songIdx = props.playerQueue.findIndex(
    (song) => song.id === props.playerInfo.id
  )

  return songIdx > -1 ? songIdx : curIdx.value
})

watch(
  () => [props.playerInfo, props.playerQueue, props.show],
  ([newPlayerInfo, newPlayerQueue, newShowPlayer]) => {
    if (newPlayerQueue.length > 0) {
      // 获取显示索引歌曲
      const songIdx = newPlayerQueue.findIndex(
        (song) => song.id === newPlayerInfo.id
      )
      // 存在就设置队列索引
      if (songIdx > -1) curIdx.value = songIdx
    }

    // 存在显示播放器
    showPlayer.value = newShowPlayer
  },
  { deep: true }
)

/**
 * 暂停/播放
 */
const changePaused = () => {
  if (props.playerStatus.paused) emit('pause')
  else emit('play')
}

const changeSwiper = (e) => {
  if (curIdx.value !== e.detail.current)
    emit('cutSong', props.playerQueue[e.detail.current])
}

/**
 * 切换歌曲
 * @param e e.detail = {current: current, source: source}
 */
const finishSwiper = (e) => {
  curIdx.value = e.detail.current
}
</script>

<template>
  <u-popup
    v-model="showPlayer"
    mode="bottom"
    :mask="false"
  >
    <view class="player-box">
      <u-line-progress
        active-color="#465cff"
        height="2"
        :percent="playerStatus.percent"
        :round="false"
        :show-percent="false"
      ></u-line-progress>
      <view class="player-info">
        <!-- 左侧-图片 -->
        <view
          class="player-info--image"
          @click="$emit('show:bigPlayer')"
        >
          <u-image
            class="player-info--image-pic"
            :class="{
              'ty-rotate': playerInfo.name !== '天音',
              'ty-running': !playerStatus.paused,
              'ty-paused': playerStatus.paused,
            }"
            :src="playerInfo.pic"
            mode="aspectFill"
            shape="circle"
            height="100%"
          ></u-image>
          <!-- 歌曲播放显示 -->
          <u-mask :show="!playerStatus.paused">
            <view class="mask-arrow">
              <u-icon
                class="mask-arrow-up"
                name="arrow-up"
                :size="25"
                color="#fff"
              ></u-icon>
              <u-icon
                class="mask-arrow-up"
                name="arrow-up"
                :size="25"
                color="#fff"
              ></u-icon>
            </view>
          </u-mask>
        </view>
        <!-- 信息 -->
        <view class="player-info--center">
          <!-- 显示加载 -->
          <ty-loading
            type="row"
            text="歌曲加载中"
            iconSize="40"
            v-if="loading"
          ></ty-loading>
          <template v-else>
            <!-- 歌曲名称及作者 -->
            <view
              class="player-info--title"
              v-if="playerQueue.length <= 0"
            >
              <view class="name u-line-2">{{ playerInfo.name }}</view>
              <view class="artist u-line-1">{{ playerInfo.artist }}</view>
            </view>
            <swiper
              :current="curSongIdx"
              @change="changeSwiper"
              @animationfinish="finishSwiper"
              v-else
            >
              <swiper-item
                class="swiper-item"
                v-for="item in playerQueue"
                :key="item.id"
              >
                <!-- 歌曲名称及作者 -->
                <view class="player-info--title">
                  <view class="name u-line-2">{{ item.name }}</view>
                  <view class="artist u-line-1">{{ item.artist }}</view>
                </view>
              </swiper-item>
            </swiper>
          </template>
        </view>
        <!-- 右侧 -->
        <view class="player-info--right">
          <!-- 时间 -->
          <view class="player-song-time">
            <text class="player-time"
              >{{ readableTime(playerStatus.currentTime) }} /
              {{ readableTime(playerStatus.duration) }}</text
            >
          </view>
          <!-- 图标 -->
          <view class="player-icon">
            <u-icon
              custom-prefix="ty-icon"
              name="bofang"
              size="55"
              :color="theme"
              @click="changePaused"
              v-if="!playerStatus.paused"
            ></u-icon>
            <u-icon
              custom-prefix="ty-icon"
              name="bofang1"
              size="55"
              :color="theme"
              @click="changePaused"
              v-else
            ></u-icon>
            <u-icon
              custom-prefix="ty-icon"
              class="player-icon--gl"
              name="playlist4-o"
              color="#333"
              size="50"
              @click="$emit('show:queue')"
            ></u-icon>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<style lang="scss" scoped>
.u-drawer,
:deep(.u-drawer) {
  overflow: auto;
  top: auto;
  height: 130rpx;
}

.u-drawer-content,
:deep(.u-drawer-content) {
  background-color: rgba($color: $u-bg-color-inverse, $alpha: 0.6);
  backdrop-filter: blur(20rpx);
  box-shadow: rgba(100, 100, 100, 0.1) 2rpx 0rpx 5rpx;
}

.u-mask,
:deep(.u-mask) {
  top: auto !important;
}

.player-info {
  @include ty-flex-row;
  @include ty-col-center;
  height: 120rpx;
  padding: $ty-sm-padding $ty-lg-padding;
  &--center {
    flex: 1;
  }
  &--image {
    width: 100rpx;
    height: 100rpx;
    border-radius: $uni-border-radius-circle;
    overflow: hidden;
    position: relative;
    :deep(.u-mask) {
      border-radius: $uni-border-radius-circle;
      position: absolute;
      top: 0 !important;
    }
    &-pic {
      width: 100%;
      height: 100%;
    }
    .mask-arrow {
      @include ty-flex-col;
      @include ty-col-center;
      @include ty-row-center;
      height: 100%;
      &-up {
        animation: fadeOut 1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
        &:nth-child(2) {
          animation-delay: 0.5s;
        }
      }
    }
  }
  &--title {
    flex: 1;
    @include ty-flex-col;
    @include ty-row-center;
    padding: $ty-md-padding $ty-lg-padding;
    width: 100%;
    .name {
      color: $u-main-color;
      font-size: 30rpx;
      padding-bottom: 15rpx;
    }
    .artist {
      font-size: 18rpx;
      color: $u-type-primary;
    }
  }
  &--right {
    @include ty-flex-col;
    @include ty-col-bottom;
  }
}

.swiper-item {
  @include ty-flex-row;
  @include ty-col-center;
}

.player-song-time {
  margin-bottom: $ty-md-padding;
  .player-time {
    font-size: 20rpx;
  }
}

.player-icon {
  @include ty-flex-row;
  &--gl {
    margin-left: $ty-lg-padding;
  }
}
</style>
